<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>React16_4整理-实战 | aiyoudiao</title>
    <meta name="generator" content="VuePress 1.9.10" />
    <link rel="icon" href="/img/blog.ico">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script> <meta name="description" content="码二~">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,gitee,markdown">
    <meta name="theme-color" content="#11a8cd">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.146197cf.css" as="style"><link rel="preload" href="/assets/js/app.bd2fbc77.js" as="script"><link rel="preload" href="/assets/js/3.72c9c947.js" as="script"><link rel="preload" href="/assets/js/115.bdc61268.js" as="script"><link rel="preload" href="/assets/js/42.4251ca36.js" as="script"><link rel="prefetch" href="/assets/js/1.4ed4671d.js"><link rel="prefetch" href="/assets/js/10.bd6ddb58.js"><link rel="prefetch" href="/assets/js/100.20d2348f.js"><link rel="prefetch" href="/assets/js/101.ba7b784c.js"><link rel="prefetch" href="/assets/js/102.c3e2dcae.js"><link rel="prefetch" href="/assets/js/103.0f4c50f3.js"><link rel="prefetch" href="/assets/js/104.ef47a111.js"><link rel="prefetch" href="/assets/js/105.2e00f516.js"><link rel="prefetch" href="/assets/js/106.b50e19b9.js"><link rel="prefetch" href="/assets/js/107.e125a8f6.js"><link rel="prefetch" href="/assets/js/108.770493ab.js"><link rel="prefetch" href="/assets/js/109.74766d7b.js"><link rel="prefetch" href="/assets/js/11.f786a5ee.js"><link rel="prefetch" href="/assets/js/110.0b0ee5b4.js"><link rel="prefetch" href="/assets/js/111.835b0e44.js"><link rel="prefetch" href="/assets/js/112.352fa217.js"><link rel="prefetch" href="/assets/js/113.4e908557.js"><link rel="prefetch" href="/assets/js/114.7b77996d.js"><link rel="prefetch" href="/assets/js/116.d5da9b8b.js"><link rel="prefetch" href="/assets/js/117.35ab1f9f.js"><link rel="prefetch" href="/assets/js/118.517c151d.js"><link rel="prefetch" href="/assets/js/119.f7f49ba8.js"><link rel="prefetch" href="/assets/js/12.3c729a65.js"><link rel="prefetch" href="/assets/js/120.b559598b.js"><link rel="prefetch" href="/assets/js/121.bf8a2f43.js"><link rel="prefetch" href="/assets/js/122.11a0bc97.js"><link rel="prefetch" href="/assets/js/123.2bafdde7.js"><link rel="prefetch" href="/assets/js/124.dc393688.js"><link rel="prefetch" href="/assets/js/125.ed3f389a.js"><link rel="prefetch" href="/assets/js/126.8fd9a57d.js"><link rel="prefetch" href="/assets/js/127.3bf2a1f2.js"><link rel="prefetch" href="/assets/js/128.b9c671d3.js"><link rel="prefetch" href="/assets/js/129.5d331f0d.js"><link rel="prefetch" href="/assets/js/13.7b1a1fe5.js"><link rel="prefetch" href="/assets/js/130.53e4f9c6.js"><link rel="prefetch" href="/assets/js/131.dcc47e1d.js"><link rel="prefetch" href="/assets/js/132.692dcdcd.js"><link rel="prefetch" href="/assets/js/133.e293202c.js"><link rel="prefetch" href="/assets/js/134.593dccf2.js"><link rel="prefetch" href="/assets/js/135.d76d384b.js"><link rel="prefetch" href="/assets/js/136.a519c23c.js"><link rel="prefetch" href="/assets/js/137.b1821288.js"><link rel="prefetch" href="/assets/js/138.5bcea4ef.js"><link rel="prefetch" href="/assets/js/139.076664b0.js"><link rel="prefetch" href="/assets/js/14.35f257b2.js"><link rel="prefetch" href="/assets/js/140.a019e655.js"><link rel="prefetch" href="/assets/js/141.1f70e1c7.js"><link rel="prefetch" href="/assets/js/142.5ed728fd.js"><link rel="prefetch" href="/assets/js/143.1c8cdc78.js"><link rel="prefetch" href="/assets/js/144.b0cb125b.js"><link rel="prefetch" href="/assets/js/145.c0209a76.js"><link rel="prefetch" href="/assets/js/146.551469f4.js"><link rel="prefetch" href="/assets/js/147.1dfd721d.js"><link rel="prefetch" href="/assets/js/148.91d07ef5.js"><link rel="prefetch" href="/assets/js/149.5b88b710.js"><link rel="prefetch" href="/assets/js/15.23bbc29a.js"><link rel="prefetch" href="/assets/js/150.8301107f.js"><link rel="prefetch" href="/assets/js/151.867da089.js"><link rel="prefetch" href="/assets/js/152.935d5046.js"><link rel="prefetch" href="/assets/js/153.f39d8435.js"><link rel="prefetch" href="/assets/js/154.6b9eb2c3.js"><link rel="prefetch" href="/assets/js/155.14283ad4.js"><link rel="prefetch" href="/assets/js/156.2d7c1a2a.js"><link rel="prefetch" href="/assets/js/157.2f28d02f.js"><link rel="prefetch" href="/assets/js/158.151221ae.js"><link rel="prefetch" href="/assets/js/159.ef6d7ffe.js"><link rel="prefetch" href="/assets/js/16.1793aef7.js"><link rel="prefetch" href="/assets/js/160.de54c4ea.js"><link rel="prefetch" href="/assets/js/161.24d4e57c.js"><link rel="prefetch" href="/assets/js/162.632032fe.js"><link rel="prefetch" href="/assets/js/163.fd01cd99.js"><link rel="prefetch" href="/assets/js/164.45f203f5.js"><link rel="prefetch" href="/assets/js/165.aafe4fe1.js"><link rel="prefetch" href="/assets/js/166.1dd1d21c.js"><link rel="prefetch" href="/assets/js/167.5501b3a1.js"><link rel="prefetch" href="/assets/js/168.fbe58b1f.js"><link rel="prefetch" href="/assets/js/169.2cae7f5e.js"><link rel="prefetch" href="/assets/js/17.bbfe63f2.js"><link rel="prefetch" href="/assets/js/170.265f7c9e.js"><link rel="prefetch" href="/assets/js/171.b61f327d.js"><link rel="prefetch" href="/assets/js/172.5d0043fd.js"><link rel="prefetch" href="/assets/js/173.45284bb6.js"><link rel="prefetch" href="/assets/js/174.9130e0c4.js"><link rel="prefetch" href="/assets/js/175.2b38bddd.js"><link rel="prefetch" href="/assets/js/176.9772cf09.js"><link rel="prefetch" href="/assets/js/177.69048ebc.js"><link rel="prefetch" href="/assets/js/178.e10d7ce5.js"><link rel="prefetch" href="/assets/js/179.3789edc0.js"><link rel="prefetch" href="/assets/js/18.0807ded0.js"><link rel="prefetch" href="/assets/js/180.ab675e47.js"><link rel="prefetch" href="/assets/js/181.2e39eff0.js"><link rel="prefetch" href="/assets/js/19.becf5a76.js"><link rel="prefetch" href="/assets/js/2.eb089a4f.js"><link rel="prefetch" href="/assets/js/20.cea59652.js"><link rel="prefetch" href="/assets/js/21.58c43ff1.js"><link rel="prefetch" href="/assets/js/22.f73b825d.js"><link rel="prefetch" href="/assets/js/23.43b13730.js"><link rel="prefetch" href="/assets/js/24.f77f93ca.js"><link rel="prefetch" href="/assets/js/25.7dfaf3fb.js"><link rel="prefetch" href="/assets/js/26.629d28e5.js"><link rel="prefetch" href="/assets/js/27.4fff23ea.js"><link rel="prefetch" href="/assets/js/28.1b8ae389.js"><link rel="prefetch" href="/assets/js/29.d5cce9a0.js"><link rel="prefetch" href="/assets/js/30.961d5519.js"><link rel="prefetch" href="/assets/js/31.121dd1af.js"><link rel="prefetch" href="/assets/js/32.4a3c5df7.js"><link rel="prefetch" href="/assets/js/33.5537f44b.js"><link rel="prefetch" href="/assets/js/34.1d4d4653.js"><link rel="prefetch" href="/assets/js/35.d094209b.js"><link rel="prefetch" href="/assets/js/36.832660c5.js"><link rel="prefetch" href="/assets/js/37.145c3665.js"><link rel="prefetch" href="/assets/js/38.4f369bfe.js"><link rel="prefetch" href="/assets/js/39.ba060044.js"><link rel="prefetch" href="/assets/js/4.66d742f6.js"><link rel="prefetch" href="/assets/js/40.e50e0379.js"><link rel="prefetch" href="/assets/js/41.4ed7617c.js"><link rel="prefetch" href="/assets/js/43.d22b74c4.js"><link rel="prefetch" href="/assets/js/44.59439f9d.js"><link rel="prefetch" href="/assets/js/45.da28bc46.js"><link rel="prefetch" href="/assets/js/46.b8db1176.js"><link rel="prefetch" href="/assets/js/47.7ed16fc7.js"><link rel="prefetch" href="/assets/js/48.c982d5ed.js"><link rel="prefetch" href="/assets/js/49.a7579f55.js"><link rel="prefetch" href="/assets/js/5.08802d7d.js"><link rel="prefetch" href="/assets/js/50.103b5bf6.js"><link rel="prefetch" href="/assets/js/51.0fe9d79a.js"><link rel="prefetch" href="/assets/js/52.9ba31e26.js"><link rel="prefetch" href="/assets/js/53.0e8bc1f0.js"><link rel="prefetch" href="/assets/js/54.9566e517.js"><link rel="prefetch" href="/assets/js/55.a124abae.js"><link rel="prefetch" href="/assets/js/56.d9cf0800.js"><link rel="prefetch" href="/assets/js/57.93599da0.js"><link rel="prefetch" href="/assets/js/58.d943f85b.js"><link rel="prefetch" href="/assets/js/59.50a66488.js"><link rel="prefetch" href="/assets/js/6.a3ea60eb.js"><link rel="prefetch" href="/assets/js/60.21aa3aa3.js"><link rel="prefetch" href="/assets/js/61.6712c00f.js"><link rel="prefetch" href="/assets/js/62.eff3e4b1.js"><link rel="prefetch" href="/assets/js/63.09701d5a.js"><link rel="prefetch" href="/assets/js/64.eb440dec.js"><link rel="prefetch" href="/assets/js/65.aeed0579.js"><link rel="prefetch" href="/assets/js/66.97244c64.js"><link rel="prefetch" href="/assets/js/67.e01c5c24.js"><link rel="prefetch" href="/assets/js/68.21be91ba.js"><link rel="prefetch" href="/assets/js/69.c0849905.js"><link rel="prefetch" href="/assets/js/7.7fd40e91.js"><link rel="prefetch" href="/assets/js/70.b32bbe5d.js"><link rel="prefetch" href="/assets/js/71.0efbc0c7.js"><link rel="prefetch" href="/assets/js/72.ef963181.js"><link rel="prefetch" href="/assets/js/73.ca7dd5db.js"><link rel="prefetch" href="/assets/js/74.4483ede8.js"><link rel="prefetch" href="/assets/js/75.374ab483.js"><link rel="prefetch" href="/assets/js/76.b4a39f08.js"><link rel="prefetch" href="/assets/js/77.6b30c3cd.js"><link rel="prefetch" href="/assets/js/78.15376c33.js"><link rel="prefetch" href="/assets/js/79.3153fcec.js"><link rel="prefetch" href="/assets/js/80.9a88c684.js"><link rel="prefetch" href="/assets/js/81.1e3f842c.js"><link rel="prefetch" href="/assets/js/82.996dbd3d.js"><link rel="prefetch" href="/assets/js/83.955158bf.js"><link rel="prefetch" href="/assets/js/84.71bdc76d.js"><link rel="prefetch" href="/assets/js/85.774e49f2.js"><link rel="prefetch" href="/assets/js/86.bebf32e5.js"><link rel="prefetch" href="/assets/js/87.becdbde1.js"><link rel="prefetch" href="/assets/js/88.49e933f4.js"><link rel="prefetch" href="/assets/js/89.eeceedfd.js"><link rel="prefetch" href="/assets/js/90.3ea6dd12.js"><link rel="prefetch" href="/assets/js/91.62a6a556.js"><link rel="prefetch" href="/assets/js/92.e2ebb8f5.js"><link rel="prefetch" href="/assets/js/93.dcdefe7a.js"><link rel="prefetch" href="/assets/js/94.bf412146.js"><link rel="prefetch" href="/assets/js/95.8deadcdc.js"><link rel="prefetch" href="/assets/js/96.9977087a.js"><link rel="prefetch" href="/assets/js/97.6591f9da.js"><link rel="prefetch" href="/assets/js/98.4db7f75e.js"><link rel="prefetch" href="/assets/js/99.a61462e9.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2852b102.js"> <link rel="stylesheet" href="/assets/css/0.styles.146197cf.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" width="50" height="50" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://p3-passport.byteacctimg.com/img/user-avatar/794fdae4ff249d532da19a3c26d420ed~300x300.image" alt="aiyoudiao" class="logo"> <span class="site-name can-hide">
      aiyoudiao
    </span></a> <div class="links"><div class="sky-switch" data-v-3a03d589><label for="toggle" data-v-3a03d589><input id="toggle" type="checkbox" data-v-3a03d589><div data-v-3a03d589></div></label></div> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/img/mar.jpg"> <div class="blogger-info"><h3>码二</h3> <span>扫微信二维码，认识一下码二吧😉。</span></div></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>react</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>16_4</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/18114480448/" class="sidebar-link">React16_4整理-开篇</a></li><li><a href="/pages/78144320432/" class="sidebar-link">React16_4整理-TodoList</a></li><li><a href="/pages/7981309049/" class="sidebar-link">React16_4整理-上阶</a></li><li><a href="/pages/4241004044/" class="sidebar-link">React16_4整理-Redux开篇</a></li><li><a href="/pages/2765901041/" class="sidebar-link">React16_4整理-Redux上阶</a></li><li><a href="/pages/53933290429/" aria-current="page" class="active sidebar-link">React16_4整理-实战</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/53933290429/#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#项目目录搭建" class="sidebar-link">项目目录搭建</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#styled-components" class="sidebar-link">Styled-Components</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#styled-components-的使用" class="sidebar-link">Styled-Components 的使用</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#制作字体图标" class="sidebar-link">制作字体图标</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#使用-combinereducers-完成对数据的拆分管理" class="sidebar-link">使用 combineReducers 完成对数据的拆分管理</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#actioncreators-与-constants-的拆分" class="sidebar-link">actionCreators 与 constants 的拆分</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#使用-immutable-js-来管理-store-中的数据" class="sidebar-link">使用 Immutable.js 来管理 store 中的数据</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#使用-redux-immutable-统一数据的格式" class="sidebar-link">使用 redux-immutable 统一数据的格式</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#使用-ajax-获取数据" class="sidebar-link">使用 ajax 获取数据</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#什么是路由-如何在-react-中使用路由功能" class="sidebar-link">什么是路由，如何在 React 中使用路由功能</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#向-styled-components-组件中传值" class="sidebar-link">向 styled-components 组件中传值</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#immutable-中的-fromjs-与-list-方法" class="sidebar-link">immutable 中的 fromJS 与 List 方法</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#不必拘于形式" class="sidebar-link">不必拘于形式</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#页面性能优化及路由跳转" class="sidebar-link">页面性能优化及路由跳转</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/53933290429/#页面性能优化" class="sidebar-link">页面性能优化</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#路由跳转" class="sidebar-link">路由跳转</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#页面路由参数的传递" class="sidebar-link">页面路由参数的传递</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#获取-styled-components-中的-dom" class="sidebar-link">获取 styled.Components 中的 dom</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#路由跳转-redirect" class="sidebar-link">路由跳转 Redirect</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#代码优化" class="sidebar-link">代码优化</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#异步组件以及-witchrouter-路由方法的使用" class="sidebar-link">异步组件以及 witchRouter 路由方法的使用</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#总结" class="sidebar-link">总结</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/53933290429/#常用的hooks就以下这些" class="sidebar-link">常用的hooks就以下这些：</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#class和hook的对比" class="sidebar-link">class和hook的对比</a></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#react性能优化" class="sidebar-link">react性能优化</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/53933290429/#基础的项目上线流程大概这样" class="sidebar-link">基础的项目上线流程大概这样</a></li></ul></li></ul></section></li><li><a href="/pages/2541802042/" class="sidebar-link">react心得</a></li><li><a href="/pages/56216400440/" class="sidebar-link">react设计的哲学</a></li><li><a href="/pages/64353330433/" class="sidebar-link">react上手知识点(上篇)</a></li><li><a href="/pages/67517390439/" class="sidebar-link">react上手知识点(下篇)</a></li><li><a href="/pages/21029430543/" class="sidebar-link">antd</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>低代码</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>读书会</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>线性代数</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>docker</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>auto</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂记</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"> <div class="theme-vdoing-wrapper bg-style-1"><div class="articleInfo-wrap" data-v-18fb2c02><div class="articleInfo" data-v-18fb2c02><ul class="breadcrumbs" data-v-18fb2c02><li data-v-18fb2c02><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-18fb2c02></a></li> <li data-v-18fb2c02><a href="/categories/?category=%E7%AC%94%E8%AE%B0" title="分类" data-v-18fb2c02>
          笔记
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=react" title="分类" data-v-18fb2c02>
          react
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=16_4" title="分类" data-v-18fb2c02>16_4</a></li></ul> <div class="info" data-v-18fb2c02><div title="作者" class="author iconfont icon-touxiang" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>aiyoudiao</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>2022-04-13</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><!----> <span>
            React16_4整理-实战
          </span></h1> <div class="theme-vdoing-content content__default"><h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>前面做了那么多准备，开发一个门户应用。在开发过程中，使用更多技术点。比如Styled-Components、Immutable.js、redux-immutable、页面性能优化、react-router等等等。<br>
总结的时候会把常用的hooks以及react性能优化、基础的项目上线流程简单说一下。</p> <h2 id="项目目录搭建"><a href="#项目目录搭建" class="header-anchor">#</a> 项目目录搭建</h2> <p>安装 <code>Create-React-App</code>：<code>npm install -g create-react-app</code><br>
运行 <code>create-react-app</code> 命令 新建一个 react 项目<br>
安装第三方模块儿 <code>Styled-Components</code> ：<code>yarn add styled-components</code></p> <h2 id="styled-components"><a href="#styled-components" class="header-anchor">#</a> Styled-Components</h2> <p>在<code>react</code>中 你在一个地方<code>引入css</code> 就会在<code>全局使用</code><br>
使用第三方模块儿<code>Styled-Components</code> 对组件中的<code>样式</code>进行<code>管理</code>，使得每一个组件的样式<code>只对自己生效</code><br>
最终会<code>返回</code>这个<code>样式的组件</code>给你，你可以<code>直接</code>使<code>用</code>这个<code>自定义样式</code>的<code>组件</code>。</p> <h2 id="styled-components-的使用"><a href="#styled-components-的使用" class="header-anchor">#</a> Styled-Components 的使用</h2> <p>将<code>css</code>文件<code>改为js</code>文件，并且<code>修改</code>用<code>引入</code>的<code>css为js</code>。</p> <p><strong>在js文件这样写：</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* injectGlobal 表示注入全局样式  */</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>injectGlobal<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span>

injectGlobal<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: green;
    }
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p><strong>使用 reset.css</strong></p> <p>去官网下载 reset.css :<code>https://meyerweb.com/eric/tools/css/reset/index.html</code>。reset.css 能够<code>清空</code>html 标签在所有浏览器的<code>默认样式</code>了，也就是<code>默认样式归0</code>。</p> <p>给某一个组件单独设置样式：<code>先写样式文件</code>，并且<code>导出样式对应的控件</code>，最后你使<code>用</code>那个<code>控件包裹</code>你的<code>内容</code>即可。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> HeaderWarpper <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
    height: 58px;
    background: #f0f0f0;
    border-bottom: 1px solid #fff;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> HeaderWarpper <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./style.js'</span>
<span class="token keyword">class</span> <span class="token class-name">Header</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">HeaderWarpper</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    Header
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">HeaderWarpper</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Header<span class="token punctuation">;</span>
</code></pre></div><p><strong>模板标签以及模板字符串</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">function</span> <span class="token function">tag</span> <span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

tag<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">123456</span><span class="token template-punctuation string">`</span></span><span class="token comment">//最后会输出[&quot;123456&quot;] 使用这种方式调用会将传递进去的参数包装成一个数组</span>
</code></pre></div><h2 id="制作字体图标"><a href="#制作字体图标" class="header-anchor">#</a> 制作字体图标</h2> <p>iconfont.cn 可以用来制作自己需要的字体图标。</p> <h2 id="使用-combinereducers-完成对数据的拆分管理"><a href="#使用-combinereducers-完成对数据的拆分管理" class="header-anchor">#</a> 使用 combineReducers 完成对数据的拆分管理</h2> <p>一般情况下，一个文件的代码超过 300 行，就说你的设计肯定是有问题的。<br>
reducer.js 中如果存放过多的数据，就需要拆分了，比如将不同组件需要使用的 reducer 放到不同组件下的 store 文件夹下，然后使用 combineReducers 整合一下，给不同的 reducer 加一个别名，使用的时候通过 state.别名.value 来用。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 这个是根目录 store目录下的reducer ，用来整合其它的reducer */</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> headerReducer <span class="token keyword">from</span> <span class="token string">'../common/header/store/reducer'</span><span class="token punctuation">;</span>

<span class="token comment">// export default combineReducers({</span>
<span class="token comment">//     header:headerReducer</span>
<span class="token comment">// })</span>
<span class="token keyword">const</span> reducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    header<span class="token operator">:</span> headerReducer
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> reducer<span class="token punctuation">;</span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/*  之前使用是直接state.focused，定义了别名后 可以这么用了*/</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToPorps</span> <span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        focused<span class="token operator">:</span> state<span class="token punctuation">.</span>header<span class="token punctuation">.</span>focused
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>按需引入时可以给引入的对象起一个别名，使用<code>as</code>关键字</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code>    <span class="token keyword">import</span> <span class="token punctuation">{</span>reducer <span class="token keyword">as</span> headerReducer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../common/header/store'</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> reducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        header<span class="token operator">:</span> headerReducer
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">export</span> <span class="token keyword">default</span> reducer<span class="token punctuation">;</span>
</code></pre></div><h2 id="actioncreators-与-constants-的拆分"><a href="#actioncreators-与-constants-的拆分" class="header-anchor">#</a> actionCreators 与 constants 的拆分</h2> <p>如果你引入的文件里是按需导出的，但是你又向一下子全部导入，你可以使用通配符加 as 来进行全部导入，不需要加花括号，加花括号其实是通过解构的方式进行赋值。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code>    <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> actionCreators <span class="token keyword">from</span> <span class="token string">'./store/actionCreators'</span><span class="token punctuation">;</span>

    <span class="token comment">//使用的时候就可以通过 actionCreators.成员的方式了。</span>
</code></pre></div><p>如果你想一下子把某一个文件夹下的 js 文件全部导出，你可以在该文件夹下新建一个 index.js 文件，然后在这个文件中引入当前文件夹下所有的 js，之后以整体导出的方式导出去。<br>
最后你在别的地方可以直接导入这个文件夹，你可以直接导入也可以按需（解构）的方式导入。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> actionCreators <span class="token keyword">from</span> <span class="token string">'./actionCreators'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> constants <span class="token keyword">from</span> <span class="token string">'./constants'</span><span class="token punctuation">;</span>
<span class="token comment">/* 整体导出 */</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span>reducer<span class="token punctuation">,</span> actionCreators<span class="token punctuation">,</span> constants<span class="token punctuation">}</span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 以解构的方式按需导入 */</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>actionCreators<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/'</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="使用-immutable-js-来管理-store-中的数据"><a href="#使用-immutable-js-来管理-store-中的数据" class="header-anchor">#</a> 使用 Immutable.js 来管理 store 中的数据</h2> <p><code>immutabel.js</code> 是 facebook 花<code>三年</code>时间<code>开发</code>的一个<code>项目</code>，也是一个<code>第三方</code>的<code>模块儿</code>。<br>
使用 <code>immutabel.js</code> 可以生成一个 <code>immutabel</code>的对象，<code>immutabel</code>表示不可改变<br>
安装<code>immutabel</code>:<code>yarn add immutable</code></p> <p><code>immutable</code> 库，将一个 js 对象转换为一个<code>immutable</code>对象，它的<code>底层</code>还是采用<code>虚拟dom</code>加<code>diff算法</code>，这样改值得时候<code>性能特别好</code></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/*fromJS可以将一个js对象转换为一个immutable对象*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>fromJS<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'immutable'</span><span class="token punctuation">;</span>

<span class="token comment">/* 这时候 defaultState是一个immutable对象*/</span>
<span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token function">fromJS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    focused<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 当state对象为一个普通的对象时可以这么做，</span>
    <span class="token comment">// 但是state对象已经是一个immutable对象了，所以不能返回一个普通对象</span>
    <span class="token comment">// if (action.type === constants.SERCH_FOCUS){</span>
    <span class="token comment">//     return {</span>
    <span class="token comment">//         focused: action.focused</span>
    <span class="token comment">//     }</span>
    <span class="token comment">// }</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> constants<span class="token punctuation">.</span><span class="token constant">SERCH_FOCUS</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">/*只能够调用set方法了*/</span>
        <span class="token comment">/* immutable对象的set方法，会结合之前immutable对象的值
            和设置的值，返回一个全新的immutable对象，也就是减少了你克隆state的那一步。
        */</span>
        <span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">,</span> action<span class="token punctuation">.</span>focused<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">// 这里面传递的是一个immutable对象而不是一个简单的{}，所以不能够直接.的方式取值了，要使用get的方式取值</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToPorps</span> <span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token comment">// focused:state.header.focused</span>
        focused<span class="token operator">:</span> state<span class="token punctuation">.</span>header<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="使用-redux-immutable-统一数据的格式"><a href="#使用-redux-immutable-统一数据的格式" class="header-anchor">#</a> 使用 redux-immutable 统一数据的格式</h2> <p>安装<code>redux-immutable</code>：<code>yarn add redux-immutable</code></p> <p>使用 <code>redux-immutable</code> 来整合所有的<code>reducer</code></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 之前整合所有的 reducer 是 引入redux中的 combineReducers*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>reducer <span class="token keyword">as</span> headerReducer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../common/header/store'</span><span class="token punctuation">;</span>

<span class="token comment">/* 现在改用 redux-immutable中的combineReducers*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-immutable'</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 这里面的state不是一个immutable对象，而 header是一个immutable对象*/</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToPorps</span><span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token comment">// focused:state.header.focused</span>
            focused<span class="token operator">:</span> state<span class="token punctuation">.</span>header<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/*
    现在改用 redux-immutable中的combineReducers之后 state也是一个immutable对象了 ,这样对数据的操作就统一了
*/</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToPorps</span> <span class="token operator">=</span> <span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token comment">// focused:state.header.focused</span>
            <span class="token comment">// focused:state.header.get('focused')</span>
            focused<span class="token operator">:</span>state<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">)</span>
            <span class="token comment">// 你也可以使用getIn这个方法，与上面等价</span>
            focused<span class="token operator">:</span>state<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'header'</span><span class="token punctuation">,</span><span class="token string">'focused'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="使用-ajax-获取数据"><a href="#使用-ajax-获取数据" class="header-anchor">#</a> 使用 ajax 获取数据</h2> <p>你可以将数据放到 <code>public</code>目录下的<code>api</code>文件夹，以<code>json</code>的格式存放。因为<code>底层</code>是一个<code>node服务器</code>，它会以<code>public文件夹</code>为<code>网站根目录</code>。<br>
这样一来你往<code>网站根目录中存放数据</code>，<code>请求</code>是<code>网站根目录</code>下的<code>资源</code>，就可以<code>获取对应的数据</code>。</p> <p>与后端开发的时候，先自己模拟数据，但是在这之前要和后端<code>约定</code>好，约定好返回的<code>数据格式</code>，例如<code>{sucess:true,data:[]}</code>，这样的。<br>
这样你才能够在模拟数据的时候写的 ajax 与真正上线的时候请求后端的<code>接口统一</code>。</p> <p><code>immutable</code> 会将<code>state</code>中的数组成员转换为<code>immutable</code>类型的<code>数组</code>，所以当你<code>set</code>的时候，如果是给一个数组成员<code>赋值</code>，那么对应的值也得是<code>immutable</code>类型的数组，不可以将普通数组赋值给<code>immutable</code>类型的数组成员。</p> <p><code>immutable</code>对象<code>转</code>换为一个<code>普通</code>的 js 对象：<code>list.toJS();</code><br>
在使用 immutable 对象的 set 方法时，每次只能够改变一个值，如果你想同时改变两个值，可以这样做。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code>state<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span>
        <span class="token punctuation">{</span>
            list<span class="token operator">:</span>action<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
            totalPage<span class="token operator">:</span>action<span class="token operator">:</span>totalPage
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//上面的写法要比下面的好一些，性能更好</span>
state<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;list&quot;</span><span class="token punctuation">,</span>action<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;totalPage&quot;</span><span class="token punctuation">,</span>action<span class="token operator">:</span>totalPage<span class="token punctuation">)</span>
</code></pre></div><h2 id="什么是路由-如何在-react-中使用路由功能"><a href="#什么是路由-如何在-react-中使用路由功能" class="header-anchor">#</a> 什么是路由，如何在 React 中使用路由功能</h2> <p>安装 react<code>路由</code>第三方模块儿：<code>react-router-dom</code>，安装命令：<code>yarn add react-router-dom</code><br>
引入路由： <code>Provider</code> 里面最好嵌套一个 div，因为里面只准有<code>一个节点</code>，<code>BrowserRouter</code>也是<code>一样</code>。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span>Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>
</code></pre></div><p>简单使用<code>路由</code></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./components/header'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token operator">&lt;</span>Provider store <span class="token operator">=</span> <span class="token punctuation">{</span>store<span class="token punctuation">}</span><span class="token operator">&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Header</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
                    </span><span class="token punctuation">{</span><span class="token comment">/*定义路由作用区域*/</span><span class="token punctuation">}</span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                        </span><span class="token punctuation">{</span><span class="token comment">/* exact 表示当你匹配的path完完全全与route中的path相等时才可以匹配成功 */</span><span class="token punctuation">}</span><span class="token plain-text">
                        &lt;Route path = '/' exact render = </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">home</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                        </span><span class="token punctuation">{</span><span class="token comment">/*定义路由*/</span><span class="token punctuation">}</span><span class="token plain-text">
                        &lt;Route path = '/detail' exact render = </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">detail</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div><p>通过路由返回 组件</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./components/header'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./pages/home'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token operator">&lt;</span>Provider store <span class="token operator">=</span> <span class="token punctuation">{</span>store<span class="token punctuation">}</span><span class="token operator">&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Header</span></span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                        </span><span class="token punctuation">{</span><span class="token comment">/* exact 表示当你匹配的path完完全全与route中的path相等时才可以匹配成功 */</span><span class="token punctuation">}</span><span class="token plain-text">
                        &lt;Route path = '/' exact component = </span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span><span class="token plain-text">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                        &lt;Route path = '/detail' exact component = </span><span class="token punctuation">{</span>Detail<span class="token punctuation">}</span><span class="token plain-text">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">BrowserRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>

</code></pre></div><h2 id="向-styled-components-组件中传值"><a href="#向-styled-components-组件中传值" class="header-anchor">#</a> 向 styled-components 组件中传值</h2> <p><code>styled-components</code>中页面向<code>style.js</code>中定义的样式组件<code>传值</code>，页面直接给对应的组件添加<code>属性</code>，<code>style.js</code>的组件里，可以通过<code>${(props)=&gt;(props.imgUrl)}</code>的方式获取到页面传递过来的值。</p> <h2 id="immutable-中的-fromjs-与-list-方法"><a href="#immutable-中的-fromjs-与-list-方法" class="header-anchor">#</a> immutable 中的 fromJS 与 List 方法</h2> <p><code>immutable</code>中除了<code>fromJS</code>可以将一个数组转换为一个<code>immutable</code>对象外，还有一个<code>List</code>方法也能够将<code>数组</code>转换为一个<code>immutable</code>对象，但是这个<code>list</code>方法只能够把数组的<code>外层</code>变成<code>immutable</code>对象，不能<code>递归</code>将数组内的对象也变成<code>immutable</code>对象。</p> <h2 id="不必拘于形式"><a href="#不必拘于形式" class="header-anchor">#</a> 不必拘于形式</h2> <p><code>UI</code> 组件中<code>允许</code>存在<code>少量</code>的<code>逻辑</code>，并不是什么 JS 都不能放在里面。</p> <h2 id="页面性能优化及路由跳转"><a href="#页面性能优化及路由跳转" class="header-anchor">#</a> 页面性能优化及路由跳转</h2> <h3 id="页面性能优化"><a href="#页面性能优化" class="header-anchor">#</a> 页面性能优化</h3> <p>之前使用 <code>shouldComponentUpdate</code> 来<code>检查</code>是否与当前页面<code>状态</code>有关来决定是否<code>重新渲</code>染当前<code>组件</code>，<code>return true</code>表示<code>重绘</code>否则就<code>不重绘</code>。</p> <p><code>react</code>中有一个<code>PureComponent</code>，它与<code>Component</code>的区别是它<code>内部</code>自动<code>实现</code>了<code>shouldComponentUpdate</code>这个生命周期内<code>检查</code>功能，所以你只需要把所有的<code>Component替换成PureComponent</code>就可以<code>减少</code>每一个<code>组件内</code>都写<code>shouldComponentUpdate</code>来<code>检查</code>了。</p> <p>之所以可以使用<code>PureComponent</code>来大大的<code>提升性能</code>，因为<code>框架</code>中的<code>数据格式</code>都是<code>统一</code>的，都是<code>immutable</code>对象，就是因为这样所以使用<code>PureComponent</code>才一点问题都没有。<br>
如果<code>数据格式不统一</code>那么你会遇到<code>坑</code>。所以使用<code>immutable很重要</code>。</p> <p>如果你不使用 immutable，那么你就是用<code>Component</code>然后自己写<code>shouldComponentUpdate</code>吧。</p> <h3 id="路由跳转"><a href="#路由跳转" class="header-anchor">#</a> 路由跳转</h3> <p><code>单页应用</code>就是只会加载一次 html，整个页面都是<code>路由js</code>文件来<code>控制</code>的。重新加载 html 是比较<code>耗性能</code>的。</p> <p>如果你想使用 a 标签来进行页面跳转，请不要那样做，最好使用 <code>react-route-dom</code>中的<code>Link</code> 来替换<code>a</code>标签的<code>跳转</code>功能，它会<code>跳转</code>到真正的<code>路由</code>中去，而不会先去重新加载 html 再跳转到真正的路由中去。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Link<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-route-dom'</span><span class="token punctuation">;</span>

<span class="token comment">/* 不要使用a标签来进行页面跳转 */</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/detail<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    ...
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">/* 将上面的写法 改成这样的 */</span>
<span class="token operator">&lt;</span>Link key <span class="token operator">=</span> <span class="token punctuation">{</span>index<span class="token punctuation">}</span> to <span class="token operator">=</span> <span class="token string">'/detail'</span><span class="token operator">&gt;</span>
    <span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h2 id="页面路由参数的传递"><a href="#页面路由参数的传递" class="header-anchor">#</a> 页面路由参数的传递</h2> <p><strong>动态路由</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Link<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-route-dom'</span><span class="token punctuation">;</span>

<span class="token comment">/* 跳转到详情页的时候 直接传递id过去 */</span>
<span class="token operator">&lt;</span>Link key <span class="token operator">=</span> <span class="token punctuation">{</span>index<span class="token punctuation">}</span> to <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'/detail/'</span><span class="token operator">+</span><span class="token string">&quot;5&quot;</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        <span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 这种写法要改成下面这种写法了 */</span>
<span class="token operator">&lt;</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span>Detail<span class="token punctuation">}</span> <span class="token operator">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">/* 传递参数就需要 设置一个占位 :id  不然匹配不到，因为这个是完全匹配 */</span>
<span class="token operator">&lt;</span>Route path <span class="token operator">=</span> <span class="token string">'/detail/:id'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span>Detail<span class="token punctuation">}</span> <span class="token operator">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 页面中可以通过 match.params.id 来进行获取 */</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//5</span>
</code></pre></div><p><strong>queryString的方式传递数据</strong></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Link<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-route-dom'</span><span class="token punctuation">;</span>

<span class="token comment">/* 跳转到详情页的时候 直接传递?id=xx过去 */</span>
<span class="token operator">&lt;</span>Link key <span class="token operator">=</span> <span class="token punctuation">{</span>index<span class="token punctuation">}</span> to <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'/detail?id='</span><span class="token operator">+</span><span class="token string">&quot;5&quot;</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        <span class="token operator">...</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 还是这种写法，依然可以进行匹配 */</span>
<span class="token operator">&lt;</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span>Detail<span class="token punctuation">}</span> <span class="token operator">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 页面中可以通过 location.search 来进行获取，但是需要你自己来解析一下 */</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//?id=5</span>
</code></pre></div><h2 id="获取-styled-components-中的-dom"><a href="#获取-styled-components-中的-dom" class="header-anchor">#</a> 获取 styled.Components 中的 dom</h2> <p><code>styled.Components</code>中的<code>dom</code>对<code>原生dom</code>进行了<code>包裹</code>，所以不再使用<code>ref</code> 而是使用 <code>innerRef</code>。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 可以获取 styled.Components组件中包裹的input标签内的真实dom*/</span>
<span class="token operator">&lt;</span>Input placeholder <span class="token operator">=</span> <span class="token string">&quot;账号&quot;</span> innerRef <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>account <span class="token operator">=</span> input<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token comment">/* 打印真实的账号文本框中的值 */</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>account<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="路由跳转-redirect"><a href="#路由跳转-redirect" class="header-anchor">#</a> 路由跳转 Redirect</h2> <p>在组件中 直接进行路由跳转</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>Redirect<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span>Redirect to <span class="token operator">=</span> <span class="token string">&quot;/&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="代码优化"><a href="#代码优化" class="header-anchor">#</a> 代码优化</h2> <p>合适的行间距，代码尾部加分号，<code>switch</code>中代码过多，就写一个方法，把代码放到方法中，然后再 switch 的 case 中调用方法即可。</p> <h2 id="异步组件以及-witchrouter-路由方法的使用"><a href="#异步组件以及-witchrouter-路由方法的使用" class="header-anchor">#</a> 异步组件以及 witchRouter 路由方法的使用</h2> <p>页面中所有的 js 代码都在 <code>bundle.js</code>中，这会造成这个<code>js</code>文件<code>异常的大</code>，所以需要使用第三方的<code>异步组件</code>。<br>
安装第三方异步组件 <code>react-loadable</code>：<code>yarn add react-loadable</code><br>
使用<code>react-loadable</code></p> <div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 该组件目录下新建一个 loadble.js */</span>

<span class="token keyword">import</span> Loadable <span class="token keyword">from</span> <span class="token string">'react-loadable'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> LoadableComponent <span class="token operator">=</span> <span class="token function">Loadable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token comment">/* 要异步加载的 组件 ./ 表示当前目录下的 ./index.js 文件 */</span>
    <span class="token function-variable function">loader</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">loading</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* 异步加载时的 动画页面 */</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">正在加载...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 将这个组件返回回去 */</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LoadableComponent</span></span><span class="token punctuation">/&gt;</span></span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 你也可以返回一个无状态的组件回去 */</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">LoadableComponent</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/* 原本是这样的 */</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail'</span>

<span class="token operator">&lt;</span>Route path <span class="token operator">=</span> <span class="token string">'/detail/:id'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span>Detail<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><div class="language-tsx extra-class"><pre class="language-tsx"><code><span class="token comment">/*现在改为 在App.js 文件中将引入的组件 改为引入这个异步组件 */</span>
<span class="token comment">/*loadable 将原本引入的组件包装成了异步的组件 */</span>

<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail/loadble.js'</span>

<span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">'/detail/:id'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span>Detail<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><p>使用了<code>react-loadable</code>之后就<code>不能</code>够<code>直接获取路由传递</code>过来<code>的参数</code>了，这时候就需要使用<code>react-router-dom</code> 中的 <code>withRouter</code>方法。</p> <div class="language-tsx extra-class"><pre class="language-tsx"><code>    <span class="token keyword">import</span> <span class="token punctuation">{</span>withRouter<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>

    <span class="token comment">/* 原来是这样的 */</span>
    <span class="token keyword">export</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToPoprs<span class="token punctuation">,</span> mapDispatchToPorps<span class="token punctuation">)</span><span class="token punctuation">(</span>Detail<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">/* 改为这样 让生成的容器组件 有能力获取传递过来的参数 */</span>
    <span class="token keyword">export</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToPoprs<span class="token punctuation">,</span>mapDispatchToPorps<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">withRouter</span><span class="token punctuation">(</span>Detail<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>使用<code>react-loadable</code> 会当对应的组件代码与<code>bundle.js</code>分离，这样就能够<code>大大减少bundle.js</code>中的代码了。</p> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>本片文章是基于16.4的，最新的版本主要以16.8为标准吧，废除了一些生命周期函数，但主要的componentDidMount、shouldComponentUpdate、componentDidUpdate、componentWillUnmount都没变化。
加入react hooks，hooks的使用降低了理解成本，也让react组件更像是函数。它没有什么魔法，就是数组，还是两个数组，一个存所有state，一个存所有的state的setter。</p> <h3 id="常用的hooks就以下这些"><a href="#常用的hooks就以下这些" class="header-anchor">#</a> 常用的hooks就以下这些：</h3> <p><strong>useState</strong></p> <p>用两个数组实现的，一个存所有的state，另一个存state的setter。<br>
所以如果是在循环和判断的逻辑下用useState，会导致state和setter错乱，最好在函数顶部使用。</p> <p><strong>useEffect</strong></p> <p>治病的过程中产生了额外的影响。<br>
useEffect 就是在你初始化之后，再次render之前，产生的额外影响。比如 数组的slice 和 splice函数。</p> <p>useEffect 函数就是hooks中副作用函数，第一个参数就是callback函数，第二个参数是一个数组，就是你要监听的变量。如果你放一个空数组，它会起到一个componentDidMount的作用，没有监听任何变量，那么就不存在任何变化，那么就只会执行一次。<br>
如果你想销毁state，可以在useEffect函数return的第一个函数。</p> <p><strong>useLayoutEffect</strong></p> <p>useEffect是在浏览器渲染后执行，useLayoutEffect是在浏览器渲染前执行。<br>
官方不建议你是用它，但是官方还是出了这个hooks。<br>
useLayoutEffect 主要在useEffect函数结果不满意的时候才被用到，一般是当处理dom改变带的副作用，这个hook执行时，浏览器并未对dom进行渲染，相对于useEffect执行要早。</p> <p><strong>useEffect 和 useLayoutEffect</strong></p> <p>useEffect 和 useLayoutEffect在mount和update阶段执行方法一样，传参不一样。<br>
useEffect异步执行，而useLayoutEffect同步执行。<br>
Effect 用 HookPassive 标记useEffect，用HookLayout标记useLayoutEffect。</p> <p><strong>useMemo</strong></p> <p>老的是memo，新的hooks中是useMemo。传递⼀个函数和依赖项，当依赖项发⽣变
化，执⾏函数，该函数需要返回⼀个值</p> <p>类似于vue中的computed 计算属性，但是写法不同。</p> <p><strong>useCallback</strong></p> <p>返回一个函数，当监听的数据发生变化，才会执行回调函数。</p> <p><strong>useRef</strong></p> <p>相当于一个id的作用，id能够找真实dom，这个可以用来找虚拟dom，可以拿到fiber对象。</p> <p><strong>useReducer</strong></p> <p>redux、mbox是完整独立的状态管理方案。未必一定是为react打造的，它们只是和react进行了结合。react本身关注的是渲染UI和响应各种事件，为了提高效率，所以官方才出了这个hook。</p> <p>聚合参数，以达到开发效率的提升以及代码的简洁。<br>
useReducer在re-render时候不会改变存储位置，state作为props传给子component不会产生diff的效率问题（useMemo优化）</p> <p>useReducer也许是替代useState，由于数据并未能共享，所以 并不能替代redux、mbox。</p> <p><strong>useContext</strong></p> <p>useContext能够产生一个Provider，能够使得你的Provider标签下面所有的组件共享一组数据。类似于一个局部的window哟。</p> <p><strong>自定义Hook</strong></p> <p>自定义的hook其实并不是hook，只是一个自定义的函数，只是它用了use标识开头，看起来像是符合了Hook的规则。<br>
useXXX 和vue3的composition api很像。</p> <h3 id="class和hook的对比"><a href="#class和hook的对比" class="header-anchor">#</a> class和hook的对比</h3> <p>官方不考虑废除class。class只是一种编程方式，在16.0之后依然是使用fiber和新的diff算法，效率上并不比class差，提升效率使用的是fiber。</p> <p>hooks延申的写法太多，也许页面中一堆useState，可能显得比较乱，有时很难搞清楚这些state之间的关联，当然你可以尝试根据相应的业务逻辑做一下聚合。容易发生内存泄露。<br>
class语法虽然难以理解，都是代码逻辑比较清晰，它面向对象嘛。</p> <p>hook往往作为那种单节点组件，比如几十个表单域。最后使用class来写一个整个表单的数据流的入口。</p> <p>useEffect是浅监听。</p> <h3 id="react性能优化"><a href="#react性能优化" class="header-anchor">#</a> react性能优化</h3> <ol><li>避免跨层级的移动</li> <li>sholudComponentUpdate</li> <li>Memo/useMemo</li> <li>useReducer</li></ol> <h2 id="基础的项目上线流程大概这样"><a href="#基础的项目上线流程大概这样" class="header-anchor">#</a> 基础的项目上线流程大概这样</h2> <p>后端和前端定了一些接口之后，前端同学去写前端的代码，后端去写后端接口。</p> <p><strong>以后端是php为例</strong></p> <p>后端的开发目录一般在<code>htdocs</code>下，接口在 htdocs 的 api 目录下，这里写各种各样的 php 代码去调用数据库。<br>
前端可以将模拟的<code>api</code>文件夹下的数据删除掉了，因为后端同学已经把接口写好了。<br>
前端同学 使用<code>npm run build</code>命令，打包所有的文件到一个<code>build</code>目录下，这时候前端的任务已经完成了。<br>
后端的同学 就会把<code>build</code>目录的文件全部粘贴到 htdocs 目录下，这时候前端的代码就已经放到后端的项目中了，这个时候就完成了项目的上线。<br>
当前端的项目放到了后端的项目里面，这时候就应该去访问后端的项目了。<br>
后端开启服务器，你去访问，成功访问，因为你之前弄的 api 目录和后端的 api 目录一致，所以就可以直接运行了。</p></div></div> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=react" title="标签">#react</a><a href="/tags/?tag=redux" title="标签">#redux</a></div> <div class="last-updated"><span class="prefix">上次更新时间:</span> <span class="time">10年18月2023日 01时57分53秒</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/2765901041/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">React16_4整理-Redux上阶</div></a> <a href="/pages/2541802042/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">react心得</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/2765901041/" class="prev">React16_4整理-Redux上阶</a></span> <span class="next"><a href="/pages/2541802042/"> react心得 </a>
        →
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/45343271027/"><div>01.数据结构导论一览.md</div></a> <span>10-16</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/38850370637/"><div>30.2023年06月04日.md</div></a> <span>06-04</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/74707370537/"><div>08.与测量相关.md</div></a> <span>05-06</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div> </main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2017-2023
    <span class="link">aiyoudiao 码二</span> <span>备案号：</span> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" title="备案号">鄂ICP备2022002654号-1</a></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="list" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer><div id="VuepressPluginLive2d"></div></div></div>
    <script src="/assets/js/app.bd2fbc77.js" defer></script><script src="/assets/js/3.72c9c947.js" defer></script><script src="/assets/js/115.bdc61268.js" defer></script><script src="/assets/js/42.4251ca36.js" defer></script>
  </body>
</html>
